<template>
	<view>
		<!-- 公共头筛选组件 -->
		<u-popup v-model="show" safe-area-inset-bottom mode="bottom"  border-radius="40" @close="close" closeable>
			<view class="specification">
				<view class="close" @click="close">
					<text class="iconfont icon-guanbi"></text>
				</view>
				<view class="main">
					<view class="main__header">筛选</view>
					<view class="main__view">
						<view class="main__view-header">商品排序</view>
						<view class="main__view-text">
							<text v-for="(item,i) in sortData" :class="sortIndex === i ? 'checked' : ''" @click="sortIndex = i">{{item.name}}</text>
						</view>
					</view>
					
					<view class="main__view">
						<view class="main__view-header">商品类型</view>
						<view class="main__view-text">
							<text v-for="(item,i) in typeData" :class="typeIndex === i ? 'checked' : ''" @click="typeIndex = i">{{item.title}}</text>
						</view>
					</view>
					
					<view class="main__view" v-if="type == 'integral'">
						<view class="main__view-header">积分分类</view>
						<view class="main__view-text">
							<text v-for="(item,i) in integrateData" :class="integrateIndex === i ? 'checked' : ''" @click="integrateIndex = i">{{item.title}}</text>
						</view>
					</view>
					
					<!-- <view class="main__view">
						<view class="main__view-header">项目时长</view>
						<view class="main__view-text">
							<text v-for="(item,i) in durationData" :class="durationIndex === i ? 'checked' : ''" @click="durationIndex = i">{{item.name}}</text>
						</view>
					</view>
					
					<view class="main__view">
						<view class="main__view-header">项目功效</view>
						<view class="main__view-text">
							<text v-for="(item,i) in effectData" :class="effectIndex === i ? 'checked' : ''" @click="effectIndex = i">{{item.name}}</text>
						</view>
					</view> -->
					
				</view>
				<view style="height: 135rpx;"></view>
				<view class="subimt">
					<view @click="close()" class="cancel">取消</view>
					<view @click="confirm()" class="confirm">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			show: {
				type: Boolean,
				default: false
			},
			type: { // integral 积分
				type: String,
				default: ''
			}
		},
		data() {
			return {
				sortIndex: 0,
				typeIndex: 0,
				durationIndex: 0,
				effectIndex: 0,
				sortData:[{name: '全部'}, {name: '人气最高'}, {name: '价格最高'}],
				typeData:[],
				durationData:[{name: '全部', value: ''}, {name: '30分钟', value: '30'}, {name: '60分钟', value: '60'}, {name: '90分钟', value: '90'}],
				effectData:[],
				integrateData: [],
				integrateIndex: 0
			}
		},
		methods: {
			opens(objItem){
				// console.log(45, objItem)
				if (this.type == 'integral') { // 积分
					this.integrateCateList()
				}
				if (objItem.cate_id || objItem.duration || objItem.tags_id || objItem.sort || objItem.integrate_cate) {
					this.sortIndex = objItem.sort
					this.typeIndex = this.typeData.findIndex((item) => item.id === objItem.cate_id)
					this.durationIndex = this.durationData.findIndex((item) => item.value === objItem.duration)
					this.effectIndex = this.effectData.findIndex((item) => item.id === objItem.tags_id)
					this.integrateIndex = this.integrateData.findIndex((item) => item.id === objItem.integrate_cate)
				} else {
					this.getCate()
					this.getTags()
				}
			},
			async integrateCateList() {
				let {data,code} = await this.$u.api.integrateCateList();
				if (code) {
					data.unshift({id: '', title:'全部'})
					this.integrateData = data
				}
			},
			async getCate() {
				let {data,code} = await this.$u.api.getCate();
				if (code) {
					data.unshift({id: '', name:'全部'})
					this.effectData = data
				}
			},
			async getTags() {
				let {data,code} = await this.$u.api.goodsGetCate();
				if (code) {
					data.unshift({id: '', title:'全部'})
					this.typeData = data
				}
			},
			close() {
				this.sortIndex = 0
				this.typeIndex = 0
				this.durationIndex = 0
				this.effectIndex = 0
				this.$emit("clickHandle", false)
			},
			confirm(){//确定
				console.log(11)
				let pl = {
					sort: this.sortIndex, // 排序
					cate_id: this.typeData[this.typeIndex].id, // 类型
					duration: this.durationData[this.durationIndex].value, // 时长
					tags_id: this.effectData[this.effectIndex].id, // 功效
					integrate_cate: this.integrateData[this.integrateIndex].id
				}
				this.$emit("clickSubmit", pl)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.specification{
		height: 100%;
		background-color: #fff;
		position: relative;
		padding: 38rpx;
		.close{
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			padding: 20rpx;
			font-size: 44rpx;
			color: #8A8A8A;
		}
		.subimt{
			position: absolute;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			display: flex;
			text-align: center;
			padding: 0rpx 40rpx 0 42rpx;
			.cancel{
				text-align: center;
				width: 331rpx;
				line-height: 96rpx;
				height: 96rpx;
				border: 1rpx solid #007664;
				border-radius: 47rpx;
				margin-right: 24rpx;
				color: #007664;
				font-size: 32rpx;
			}
			.confirm{
				text-align: center;
				color: white;
				font-size: 32rpx;
				width: 331rpx;
				line-height: 96rpx;
				height: 96rpx;
				background: linear-gradient( 98deg, #50DCC2 0%, #007664 100%);
				border-radius: 47rpx;
			}
		}
	}
	.main{
		position: relative;
		&__header{
			font-size: 32rpx;
			color: #393C42;
			font-weight: bold;
			margin-top: -5rpx;
		}
		&__view{
			margin-top: 38rpx;
			&-header{
				font-size: 26rpx;
				color: #666666;
			}
			&-text{
				margin-top: 1rpx;
				text{
					display: inline-block;
					width: 155rpx;
					height: 69rpx;
					text-align: center;
					line-height: 69rpx;
					font-size: 28rpx;
					color: #999999;
					background: #F9F9F9;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					margin-right: 17rpx;
					margin-top: 15rpx;
					white-space:nowrap; 
					overflow:hidden; 
					text-overflow:ellipsis;
				}
			}
		}
		.checked{
			background: #E7F3F1;
			color: #007664;
		}
	}
</style>
